{% extends "base.html" %}

{% block title %}首页 - 股票分析系统{% endblock %}

{% block extra_css %}
<style>
    /* 移动端首页优化 */
    @media (max-width: 768px) {
        /* 欢迎横幅移动端优化 */
        .stock-info .card-body {
            padding: 2rem 1rem;
        }
        
        .stock-info .display-4 {
            font-size: 2rem;
        }
        
        .stock-info .lead {
            font-size: 1rem;
        }
        
        .stock-info p {
            font-size: 0.9rem;
        }
        
        .stock-info .btn {
            margin-bottom: 0.5rem;
            width: 100%;
        }
        
        /* 功能卡片移动端优化 */
        .metric-card .fa-3x {
            font-size: 2rem;
        }
        
        .metric-card .card-title {
            font-size: 1rem;
            margin-bottom: 0.5rem;
        }
        
        .metric-card .card-text {
            font-size: 0.85rem;
            margin-bottom: 1rem;
        }
        
        .metric-card .btn {
            font-size: 0.85rem;
            padding: 0.5rem 1rem;
        }
        
        /* 数据概览卡片优化 */
        .data-overview-card h3 {
            font-size: 1.5rem;
        }
        
        .data-overview-card .card-text {
            font-size: 0.9rem;
        }
        
        /* 系统特性卡片优化 */
        .feature-card .card-title {
            font-size: 1rem;
        }
        
        .feature-card .card-text {
            font-size: 0.85rem;
        }
        
        /* 标题优化 */
        h2 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        
        /* 间距优化 */
        .mb-4 {
            margin-bottom: 1.5rem !important;
        }
        
        .mb-5 {
            margin-bottom: 2rem !important;
        }
    }
    
    @media (max-width: 576px) {
        .stock-info .card-body {
            padding: 1.5rem 0.75rem;
        }
        
        .stock-info .display-4 {
            font-size: 1.75rem;
        }
        
        .metric-card .fa-3x {
            font-size: 1.75rem;
        }
        
        .metric-card .card-body {
            padding: 1rem 0.75rem;
        }
        
        .data-overview-card h3 {
            font-size: 1.25rem;
        }
        
        h2 {
            font-size: 1.25rem;
        }
    }
    
    /* 触摸优化 */
    @media (hover: none) and (pointer: coarse) {
        .metric-card {
            transition: none;
        }
        
        .metric-card:active {
            transform: scale(0.98);
        }
        
        .btn:active {
            transform: scale(0.95);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <!-- 欢迎横幅 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card stock-info-banner">
                <div class="card-body text-center py-5">
                    <h1 class="display-4 mb-3">📈 股票分析系统</h1>
                    <p class="lead">基于Python Flask开发的专业股票分析平台</p>
                    <p class="mb-4">提供股票基本面分析、技术面分析、资金流向分析、筹码分布分析等功能</p>
                    <div class="d-grid gap-2 d-md-block">
                        <a href="{{ url_for('main.stocks') }}" class="btn btn-light btn-lg me-md-3 btn-financial">开始分析</a>
                        <a href="{{ url_for('main.screen') }}" class="btn btn-outline-light btn-lg btn-financial">选股筛选</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 功能模块 -->
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="mb-4">🚀 核心功能</h2>
        </div>
    </div>

    <div class="row g-3 g-md-4 mb-5">
        <!-- 股票列表 -->
        <div class="col-6 col-md-6 col-lg-3">
            <div class="card metric-card-enhanced h-100 hover-lift">
                <div class="card-body text-center">
                    <div class="metric-icon">
                        <i class="fas fa-list-ul text-primary"></i>
                    </div>
                    <h5 class="card-title">股票列表</h5>
                    <p class="card-text">浏览所有股票信息，支持按行业、地域筛选</p>
                    <a href="{{ url_for('main.stocks') }}" class="btn btn-primary-financial">查看股票</a>
                </div>
            </div>
        </div>

        <!-- 技术分析 -->
        <div class="col-6 col-md-6 col-lg-3">
            <div class="card metric-card-enhanced h-100 hover-lift">
                <div class="card-body text-center">
                    <div class="metric-icon">
                        <i class="fas fa-chart-line text-success"></i>
                    </div>
                    <h5 class="card-title">技术分析</h5>
                    <p class="card-text">K线图、MACD、KDJ、RSI等技术指标分析</p>
                    <a href="{{ url_for('main.analysis') }}" class="btn btn-success-financial">技术分析</a>
                </div>
            </div>
        </div>

        <!-- 选股筛选 -->
        <div class="col-6 col-md-6 col-lg-3">
            <div class="card metric-card-enhanced h-100 hover-lift">
                <div class="card-body text-center">
                    <div class="metric-icon">
                        <i class="fas fa-filter text-warning"></i>
                    </div>
                    <h5 class="card-title">选股筛选</h5>
                    <p class="card-text">多维度条件筛选，发现投资机会</p>
                    <a href="{{ url_for('main.screen') }}" class="btn btn-warning-financial">开始筛选</a>
                </div>
            </div>
        </div>

        <!-- 策略回测 -->
        <div class="col-6 col-md-6 col-lg-3">
            <div class="card metric-card-enhanced h-100 hover-lift">
                <div class="card-body text-center">
                    <div class="metric-icon">
                        <i class="fas fa-history text-info"></i>
                    </div>
                    <h5 class="card-title">策略回测</h5>
                    <p class="card-text">验证投资策略的历史表现</p>
                    <a href="{{ url_for('main.backtest') }}" class="btn btn-primary-financial">策略回测</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 多因子模型系统 -->
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="mb-4">🧠 多因子模型系统</h2>
        </div>
    </div>

    <div class="row g-3 g-md-4 mb-5">
        <!-- 因子管理 -->
        <div class="col-6 col-md-4 col-lg-2">
            <div class="card metric-card-enhanced h-100 hover-lift">
                <div class="card-body text-center">
                    <div class="metric-icon">
                        <i class="fas fa-cogs text-primary"></i>
                    </div>
                    <h5 class="card-title">因子管理</h5>
                    <p class="card-text">管理技术面、基本面、资金面等各类因子</p>
                    <a href="/ml-factor" class="btn btn-primary-financial">因子管理</a>
                </div>
            </div>
        </div>

        <!-- 模型管理 -->
        <div class="col-6 col-md-4 col-lg-2">
            <div class="card metric-card-enhanced h-100 hover-lift">
                <div class="card-body text-center">
                    <div class="metric-icon">
                        <i class="fas fa-brain text-success"></i>
                    </div>
                    <h5 class="card-title">模型管理</h5>
                    <p class="card-text">创建和训练机器学习选股模型</p>
                    <a href="/ml-factor/models" class="btn btn-success-financial">模型管理</a>
                </div>
            </div>
        </div>

        <!-- 智能查询 -->
        <div class="col-6 col-md-4 col-lg-2">
            <div class="card metric-card-enhanced h-100 hover-lift">
                <div class="card-body text-center">
                    <div class="metric-icon">
                        <i class="fas fa-robot text-info"></i>
                    </div>
                    <h5 class="card-title">智能查询</h5>
                    <p class="card-text">用自然语言查询股票数据，AI助手</p>
                    <a href="/api/text2sql/" class="btn btn-primary-financial">智能查询</a>
                </div>
            </div>
        </div>

        <!-- 股票评分 -->
        <div class="col-6 col-md-4 col-lg-2">
            <div class="card metric-card-enhanced h-100 hover-lift">
                <div class="card-body text-center">
                    <div class="metric-icon">
                        <i class="fas fa-star text-warning"></i>
                    </div>
                    <h5 class="card-title">股票评分</h5>
                    <p class="card-text">基于因子和模型对股票进行评分排名</p>
                    <a href="/ml-factor/scoring" class="btn btn-warning-financial">股票评分</a>
                </div>
            </div>
        </div>

        <!-- 投资组合 -->
        <div class="col-6 col-md-4 col-lg-2">
            <div class="card metric-card-enhanced h-100 hover-lift">
                <div class="card-body text-center">
                    <div class="metric-icon">
                        <i class="fas fa-briefcase text-info"></i>
                    </div>
                    <h5 class="card-title">投资组合</h5>
                    <p class="card-text">智能构建和优化投资组合</p>
                    <a href="/ml-factor/portfolio" class="btn btn-primary-financial">投资组合</a>
                </div>
            </div>
        </div>

        <!-- 分析报告 -->
        <div class="col-6 col-md-4 col-lg-2">
            <div class="card metric-card-enhanced h-100 hover-lift">
                <div class="card-body text-center">
                    <div class="metric-icon">
                        <i class="fas fa-chart-bar text-secondary"></i>
                    </div>
                    <h5 class="card-title">分析报告</h5>
                    <p class="card-text">模型性能分析和因子有效性评估</p>
                    <a href="/ml-factor/analysis" class="btn btn-primary-financial">分析报告</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 实时交易分析系统 -->
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="mb-4">⚡ 实时交易分析系统</h2>
        </div>
    </div>

    <div class="row g-3 g-md-4 mb-5">
        <!-- 实时交易分析 -->
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card metric-card-enhanced h-100 hover-lift">
                <div class="card-body text-center">
                    <div class="metric-icon">
                        <i class="fas fa-chart-line text-danger"></i>
                    </div>
                    <h5 class="card-title">实时交易分析</h5>
                    <p class="card-text">分钟级数据管理、技术指标分析、交易信号生成和风险监控</p>
                    <a href="/realtime-analysis" class="btn btn-danger-financial">进入分析</a>
                </div>
            </div>
        </div>

        <!-- 数据管理 -->
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card metric-card-enhanced h-100 hover-lift">
                <div class="card-body text-center">
                    <div class="metric-icon">
                        <i class="fas fa-database text-primary"></i>
                    </div>
                    <h5 class="card-title">实时数据管理</h5>
                    <p class="card-text">分钟级K线数据同步、聚合和质量监控</p>
                    <a href="/realtime-analysis" class="btn btn-primary-financial">数据管理</a>
                </div>
            </div>
        </div>

        <!-- 技术指标 -->
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card metric-card-enhanced h-100 hover-lift">
                <div class="card-body text-center">
                    <div class="metric-icon">
                        <i class="fas fa-chart-bar text-success"></i>
                    </div>
                    <h5 class="card-title">实时技术指标</h5>
                    <p class="card-text">多周期技术指标计算和预警系统</p>
                    <a href="/realtime-analysis/indicators" class="btn btn-success-financial">技术指标</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据概览 -->
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="mb-4">📊 数据概览</h2>
        </div>
    </div>

    <div class="row g-3 g-md-4 mb-5">
        <div class="col-6 col-md-3">
            <div class="card card-financial text-center">
                <div class="card-body">
                    <h3 class="text-primary number-display" id="total-stocks">--</h3>
                    <p class="card-text">股票总数</p>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card card-financial text-center">
                <div class="card-body">
                    <h3 class="text-success number-display" id="total-industries">--</h3>
                    <p class="card-text">行业数量</p>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card card-financial text-center">
                <div class="card-body">
                    <h3 class="text-warning number-display" id="total-areas">--</h3>
                    <p class="card-text">地域数量</p>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card card-financial text-center">
                <div class="card-body">
                    <h3 class="text-info number-display">7</h3>
                    <p class="card-text">数据表</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统特性 -->
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="mb-4">✨ 系统特性</h2>
        </div>
    </div>

    <div class="row g-3 g-md-4">
        <div class="col-12 col-md-4">
            <div class="card card-financial h-100">
                <div class="card-body">
                    <h5 class="card-title">🔄 实时数据</h5>
                    <p class="card-text">支持数据自动更新，确保分析结果的时效性</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card card-financial h-100">
                <div class="card-body">
                    <h5 class="card-title">📈 多维分析</h5>
                    <p class="card-text">基本面、技术面、资金面、筹码面全方位分析</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card card-financial h-100">
                <div class="card-body">
                    <h5 class="card-title">🎯 智能筛选</h5>
                    <p class="card-text">多条件组合筛选，快速发现投资机会</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 页面加载完成后获取统计数据
document.addEventListener('DOMContentLoaded', async function() {
    try {
        // 获取股票总数
        const stocksResponse = await apiRequest('/stocks?page_size=1');
        if (stocksResponse.code === 200) {
            document.getElementById('total-stocks').textContent = stocksResponse.data.total;
        }

        // 获取行业数量
        const industriesResponse = await apiRequest('/industries');
        if (industriesResponse.code === 200) {
            document.getElementById('total-industries').textContent = industriesResponse.data.length;
        }

        // 获取地域数量
        const areasResponse = await apiRequest('/areas');
        if (areasResponse.code === 200) {
            document.getElementById('total-areas').textContent = areasResponse.data.length;
        }
    } catch (error) {
        console.error('获取统计数据失败:', error);
        // 移动端友好的错误提示
        if (typeof MobileUtils !== 'undefined') {
            MobileUtils.showMobileToast('数据加载失败，请刷新页面重试', 'error');
        }
    }
});
</script>
{% endblock %} 